import React, { useState } from 'react';
import './Logo.scss'
import plog from '../../assets/images/plog.png'
import dian from '../../assets/images/dian.jpg'
import gu from '../../assets/images/gu.jpg'
import zhong from '../../assets/images/zhong.jpg'
import jiao from '../../assets/images/jiao.png'
import yi from '../../assets/images/yi.png'
import ren from '../../assets/images/ren.jpg'
import wen from '../../assets/images/wen.png'

function Logo() {
  const [offset, setOffset] = useState(0);

  const handleNext = () => {
    if (offset > -30) {
      setOffset(offset - 30);
    }
  };

  const handlePrev = () => {
    if (offset < 0) {
      setOffset(offset + 30);
    }
  };
  return (
    <div className='Logo'>
      <div
          className={`arrow left ${offset === 0 ? 'hidden' : ''}`}
          onClick={handlePrev}
        >
          &lt;
        </div>
        <div
          className={`arrow right ${offset <= -1100 ? 'hidden' : ''}`}
          onClick={handleNext}
        >
          &gt;
        </div>
      <ul className='logoul' style={{ transform: `translateX(${offset}px)` }}>
        <li><img src={plog} alt="" />
          <div></div>
          <span>plog人像</span>
        </li>
        <li><img src={dian} alt="" />
          <div></div>
          <span>电商套系</span>
        </li>
        <li><img src={gu} alt="" />
          <div></div>
          <span>古风汉服</span>
        </li>
        <li><img src={zhong} alt="" />
          <div></div>
          <span>中国人像</span>
        </li>
        <li><img src={jiao} alt="" />
          <div></div>
          <span>教育培训</span>
        </li>
        <li><img src={yi} alt="" />
          <div></div>
          <span>医疗保健</span>
        </li>
        <li><img src={ren} alt="" />
          <div></div>
          <span>生活场景</span>
        </li>
        <li><img src={wen} alt="" />
          <div></div>
          <span>传统文化</span>
        </li>
      </ul>
    </div>
  )
}

export default Logo
